<template>
	<el-form :inline="true" :model="formData" class="demo-form-inline">
		<el-form-item>
			<el-input v-model="formData.id" placeholder="请输入关键字" />
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="onQuery">查询</el-button>
		</el-form-item>
	</el-form>
	<el-table :data="tableData" style="width: 100%">
		<el-table-column fixed prop="id" label="编号" width="200" />
		<el-table-column
			prop="ooDate"
			label="出库时间"
			width="120"
			:formatter="formatter1"
		/>

		<el-table-column prop="operson" label="出库人" width="120" />
		<el-table-column prop="lastupdateby" label="最近更新人" width="120" />
		<el-table-column
			prop="lastupdatetime"
			label="最后更新时间"
			width="200"
			:formatter="formatter"
		/>
		<el-table-column prop="brief" label="备注" width="150" />
		<el-table-column fixed="right" label="操作" width="200">
			<template #default="scope">
				<el-button
					type="primary"
					size="small"
					@click="detail(scope.row)"
					>详情</el-button
				>
			</template>
		</el-table-column>
	</el-table>
	<br />
	<!-- <Pagex @on-change="callOoApi" v-model="pageData"></Pagex> -->

	<el-drawer
		v-model="itemShow"
		direction="ltr"
		:title="ooId + '详情'"
		size="80%"
	>
		<el-table :data="items" style="width: 100%">
			<el-table-column fixed prop="id" label="编号" width="60" />

			<el-table-column prop="productName" label="商品名称" width="100" />
			<el-table-column prop="qty" label="数量" width="80" />
			<el-table-column label="出库地" width="120">
				<template #default="scope">
					<ShelfTree v-model="scope.row.shelfId"></ShelfTree>
				</template>
			</el-table-column>
			<el-table-column
				prop="lastupdateby"
				label="最近更新人"
				width="120"
			/>
			<el-table-column
				prop="lastupdatetime"
				label="最后更新时间"
				width="200"
				:formatter="formatter"
			/>
			<el-table-column prop="brief" label="备注" width="120" />
		</el-table>
	</el-drawer>
</template>

<script lang="ts" setup>
	import { ooApi } from '@/api';
	import { ref, onMounted, reactive } from 'vue';
	// import Pagex from '@/components/Pagex.vue';
	import ShelfTree from '@/components/ShelfTree.vue';
	import dayjs from 'dayjs';
	const tableData = ref([]);
	const items = ref([]);
	const ooId = ref('');
	const formData = reactive({
		id: '',
	});
	const itemShow = ref(false);
	const detail = (row: any) => {
		ooApi.items.call({ id: row.id }).then((res: any) => {
			items.value = res;
			itemShow.value = true;
			ooId.value = row.id;
		});
	};

	// const pageData = reactive({
	// 	total: 0,
	// 	pageSize: 5,
	// 	pageNum: 1,
	// });

	onMounted(() => {
		callOoApi();
	});

	const callOoApi = () => {
		// let pageNum = pageData.pageNum;
		// let pageSize = pageData.pageSize;
		ooApi.select
			.call({
				...formData,
				// pageNum,
				// pageSize,
			})
			.then((res: any) => {
				// console.log(res);

				// pageData.total = res.total;
				tableData.value = res;
			});
	};
	const onQuery = () => {
		callOoApi();
	};
	const formatter = (
		_row: any,
		_column: any,
		cellValue: any,
		_index: any
	) => {
		return dayjs(cellValue).format('YYYY-MM-DD HH:mm');
	};
	const formatter1 = (
		_row: any,
		_column: any,
		cellValue: any,
		_index: any
	) => {
		return dayjs(cellValue).format('YYYY-MM-DD');
	};
</script>